<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>机票</title>

    <link type="text/css" th:href="@{/css/booking.css}" rel="stylesheet">
    <link type="text/css" th:href="@{/css/public.css}" rel="stylesheet">
    <link rel="stylesheet" type="text/css"  th:href="@{/css/mystyle.css}">
    <script th:src="@{/js/jquery-1.8.3.min.js}" type="text/javascript"></script>
    <script th:src="@{/js/cities.js}" type="text/javascript"></script>
    <script language="javascript" th:src="@{/My97DatePicker/WdatePicker.js}"></script>
    <script th:src="@{/js/jquery.validate.js}" type="text/javascript"></script>
    <style type="text/css">
        .flight-section {
            transform-origin: 50% 50% 0;
            transition: all 1000ms ease 0s, opacity 800ms ease 0s;
            -webkit-transform-origin: 50% 50% 0;
            -webkit-transition: all 1000ms ease 0s, opacity 800ms ease 0s;
        }

        #flight-departure .flight-section.past {
            opacity: 0;
            transform: rotateY(180deg);
            -webkit-transform: rotateY(180deg);
        }

        #flight-departure .flight-section.future {
            opacity: 1;
            transform: rotateY(0deg);
            -webkit-transform: rotateY(0deg);
            z-index: 22px;
        }
    </style>
</head>
<body>
<header id="header">
    <hgroup>


        <address class="text blue">
            <p style="font-size: 15px;color:#fff">欢迎您，<span th:text="${session.customer.username}"></span>&nbsp;&nbsp;<a th:href="@{/home/logout}" style="color: #fff">退出</a></p>
        </address>


        <div class="clear"></div>
    </hgroup>
</header>
<menu id="menu">
    <nav>
        <ul class="menu_index">
<!--            <li id="menu-home">-->
<!--                <a href="index.jsp">首页</a> <i></i>-->
<!--            </li>-->
            <li id="menu-myceair">
                <a th:href="@{/home/customerinfo}">个人信息</a> <i></i>
            </li>
            <li id="menu-booking" class="current">
                <a href="index.jsp">预订行程</a>
                <i></i>
            </li>

        </ul>
    </nav>
</menu>

<section id="main-area">
    <article class="position">
        您的位置：
        <a href="#">首页</a>
        &gt;
        <h1>
            <a href="#">预订行程</a>
        </h1>
        &gt;
        <h1>航班选择</h1>
    </article>
    <section id="content" class="auto">


        <section class="booking-select">
            <aside class="right-side">


                <hgroup id="flight-departure">


                    <article class="flight-title">
                        <strong><b>选择去程</b>
                        &nbsp;   <span th:text="${startPlace}"></span> - <span th:text="${endPlace}"></span>&nbsp;&nbsp;
                            <span th:text="${#dates.format(startDate, 'MM')}"></span>月
                            <span th:text="${#dates.format(startDate, 'dd')}"></span>日
                        </strong>
                        <em>当前
                            <b class="blue" num="25" th:text="${flightList.size()}">1</b>
                            条符合条件</em>

                    </article>


                    <section id="flight-info">
                        <div th:each="flight : ${flightList}" class="flight-section" style="z-index: 4;">
                            <div class="head">
                                <dl>
                                    <dt class="icon">
                                        <br>
                                    </dt>
                                    <dt>
                                        <span th:text="${flight.models.company.name}"></span>
                                        <br>
                                        <span style="z-index: 9;" id="flightNumber"></span>
                                    </dt>
                                    <dt class="right">
                                        <b><span th:text="${#dates.format(flight.startDate, 'HH:mm')}"></span></b>
                                        <br><span th:text="${flight.startAirport}"></span>
                                    </dt>
                                    <dt class="center">
                                        ----->
                                    </dt>
                                    <dt class="left">
                                        <b><span th:text="${#dates.format(flight.endDate, 'HH:mm')}"></span></b>
                                        <br><span th:text="${flight.endAirport}"></span>
                                    </dt>
                                    <dd class="btn">
									<span class="price"> <dfn>¥</dfn>
										<span th:text="${flight.lastPrice}"></span>
										<i>起</i>
									</span>
                                    </dd>
                                </dl>
                            </div>
                            <div class="body">
                                <ul>
                                    <li class="c-4">
                                        经济舱(剩余：
                                        <span class="seatAlarm" style="color: #D42826;" th:text="${flight.lastNum}">
									</span>
                                        张)
                                    </li>
                                    <li class="c-5">
									<span class="price normal red"> <dfn>¥</dfn>
                                        <span th:text="${flight.lastPrice}"></span>
									</span>
                                    </li>
                                    <li class="c-6"></li>
                                    <li class="c-7">
                                        <input type="button" value="预 订" cabinidx="0" class="button lightred"
                                               name="select" id="tourist_class" th:onclick="tourist([[${flight.id}]],[[${flight.lastPrice}]],'经济舱')"></li>
                                </ul>
                                <ul>
                                    <li class="c-4">
                                        公务舱(剩余：
                                        <span class="seatAlarm" style="color: #D42826;" th:text="${flight.secondNum}">52
									</span>
                                        张)
                                    </li>
                                    <li class="c-5">
									<span class="price normal red">
										<dfn>¥</dfn>
										<span th:text="${flight.secondPrice}"></span>
									</span>
                                    </li>
                                    <li class="c-6"></li>
                                    <li class="c-7">
                                        <input type="button" value="预 订" cabinidx="1" class="button gray" name="select"
                                               id="business_class" th:onclick="tourist([[${flight.id}]],[[${flight.secondPrice}]],'公务舱')"></li>
                                </ul>
                                <ul>
                                    <li class="c-4">
                                        头等舱(剩余：
                                        <span class="seatAlarm" style="color: #D42826;" th:text="${flight.firstNum}">12
									</span>
                                        张)
                                    </li>
                                    <li class="c-5">
									<span class="price normal red">
										<dfn>¥</dfn>
										<span th:text="${flight.firstPrice}"></span>
									</span>
                                    </li>
                                    <li class="c-6"></li>
                                    <li class="c-7">
                                        <input type="button" value="预 订" id="first_class" class="button gray"
                                               name="select" th:onclick="tourist([[${flight.id}]],[[${flight.firstPrice}]],'头等舱')">
                                        <input id="flightId" type="text" style="visibility: hidden; display: none;">
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="line"></div>

                    </section>
                </hgroup>

            </aside>
            <div class="clear"></div>
        </section>
    </section>
</section>
<!--footer-->
<section id="blank"></section>
<footer id="footer">
    <hgroup class="links white">


    </hgroup>
</footer>


<div class="pop search-citys-pop click" style="display: none; z-index: 9999" id="cityarea"><a href="javascript:void(0)"
                                                                                              class="pop-close"></a>
    <div class="search-citys-tt click"><a class="current click" onClick="tabCutover(this,'s-citys1')"
                                          href="javascript:void(0)">热门城市<span></span></a> <a class="click"
                                                                                             onClick="tabCutover(this,'s-citys2')"
                                                                                             href="javascript:void(0)">ABCDEFG<span></span></a>
        <a class="click" onClick="tabCutover(this,'s-citys3')" href="javascript:void(0)">HIJKL<span></span></a> <a
                class="click" onClick="tabCutover(this,'s-citys4')" href="javascript:void(0)">MNOPQRST<span></span></a>
        <a class="click" onClick="tabCutover(this,'s-citys5')" href="javascript:void(0)">UVWXYZ<span></span></a></div>
    <div class="search-citys-list click" id="citylist"></div>
</div>
<script type="text/javascript">
    $("#btn_flight_search").click(function () {
        if ($("#flight_form").valid()) {
            $.ajax({
                type: "post",
                url: "validateflight.action",
                data: {
                    startPoint: $("#deptCd").val(),
                    endPoint: $("#arrDd").val(),
                    day: $("#day").val(),
                    companyName: $("#companyName").val()
                    ,
                    flightNumber: $("#flightNumber").val()
                },
                dataType: "json",
                success: function (data) {
                    if (data) {
                        $("#flight_form").submit();
                        postForm();
                    }
                    else {
                        alert("无该航线的航班");
                    }
                }
            });
        }
    });

    function tourist(flightId,price,seatType) {
        window.location = '/home/bookingFlight?flightId='+flightId+'&price='+price+'&seatType='+seatType;
    }

    function business(id) {
        var flightScheduleId = $("#flightScheduleId").val();
        window.location = 'bookingFlightAction.action?id=' + id + '&cabinClass=' + 1 + '&flightScheduleId=' + flightScheduleId;
    }

    function firstClass(id) {
        var flightScheduleId = $("#flightScheduleId").val();
        window.location = 'bookingFlightAction.action?id=' + id + '&cabinClass=' + 0 + '&flightScheduleId=' + flightScheduleId;
    }

    $("#flight_form").validate({
        rules: {
            "companyName": {
                remote: {
                    type: "post",
                    url: "validatecompanyname.action",
                    dataType: "json",
                    data: {
                        companyName: function () {
                            return $("#companyName").val();
                        }
                    }
                }
            },
            "flightNumber": {
                remote: {
                    type: "post",
                    url: "validateflightnumber.action",
                    dataType: "json",
                    data: {
                        flightNumber: function () {
                            return $("#flightNumber").val();
                        }
                    }
                }
            }
        },
        messages: {
            "companyName": {
                remote: '该公司不存在'
            },
            "flightNumber": {
                remote: '该航班号不存在'
            }
        },
        errorPlacement: function (error, element) {
            error.appendTo(element.parent());
        }
    });

</script>

</body>
</html>
